





<style type="text/css">
    .lottery-unit div {
        text-align: center;
        font-size: 15px;
        width: 60px;
    }

    #lottery table td {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        font-size: 24px;
        color: #333;
        z-index: -999;
        border: 4px solid rgb(255, 255, 255);
    }

    #lottery table td a {
        background-color: white;
        width: 100px;
        height: 100px;
        display: block;
        text-decoration: none;
        background-image: url(http://dcdev-lib.oss-cn-shenzhen.aliyuncs.com/image/03f7ee3854a7c494/20200804/6bc05a3a48647c0f.png);
        background-size: 100% 100%;
        margin-left: 15px;
    }

    #lottery table td.active {
        border: 4px solid pink;
    }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
    <div id="lottery">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="lottery-unit lottery-unit-0">
                        <div>0.88</div>
                    </td>
                    <td class="lottery-unit lottery-unit-1">
                        <div>0.68</div>
                    </td>
                    <td class="lottery-unit lottery-unit-2">
                        <div>0.66</div>
                    </td>
                    <td class="lottery-unit lottery-unit-3">
                        <div>0.98</div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-11">
                        <div>0.55</div>
                    </td>
                    <td colspan="2" rowspan="2">
                        <a href="#"></a>
                    </td>
                    <td class="lottery-unit lottery-unit-4">
                        <div>0.58</div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-10">
                        <div>0.01</div>
                    </td>
                    <td class="lottery-unit lottery-unit-5">
                        <div>0.58</div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-9">
                        <div>0.01</div>
                    </td>
                    <td class="lottery-unit lottery-unit-8">
                        <div>0.58</div>
                    </td>
                    <td class="lottery-unit lottery-unit-7">
                        <div>0.38</div>
                    </td>
                    <td class="lottery-unit lottery-unit-6">
                        <div>0.28</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" id="qrcode"></div>
<div id="state" style="text-align:center;"></div>
<script type="text/javascript">
    var lottery = {
        index: -1, //当前转动到哪个位置，起点位置
        count: 0, //总共有多少个位置
        timer: 0, //setTimeout的ID，用clearTimeout清除
        speed: 20, //初始转动速度
        times: 0, //转动次数
        cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1, //中奖位置
        init: function (id) {
            if ($("#" + id).find(".lottery-unit").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-" + this.index).addClass("active");
            };
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

    function iGetInnerText(testStr) {
        var resultStr = testStr.replace(/\ +/g, ""); //去掉空格
        resultStr = resultStr.replace(/[ ]/g, ""); //去掉空格
        resultStr = resultStr.replace(/[\r\n]/g, ""); //去掉回车换行
        return resultStr;
    }
    var ua = navigator.userAgent;
    var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
        isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
        isAndroid = ua.match(/(Android)\s+([\d.]+)/),
        isMobile = isIphone || isAndroid;

    function roll() {
        lottery.times += 1;
        lottery.roll();
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize = -1;
            //获取最终结果
            console.log(lottery.index);
            console.log("金额：" + iGetInnerText($(".lottery-unit-" + lottery.index).text()))

            var fee = iGetInnerText($(".lottery-unit-" + lottery.index).text());
            var data = {
                // 支付金额
                fee: fee,
                // 支付内容（将在微信账单商品位置显示）
                goods: "随机打赏",
            }
            // 发起支付
            $('#qrcode').html("");
            $('#state').html("<h1>正在支付……</h1>");
            clearInterval(window.check);
            wechatPayNative(data.fee);
            lottery.times = 0;
            click = false;
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 10;
            } else if (lottery.times == lottery.cycle) {
                var index = Math.random() * (lottery.count) | 0;
                lottery.prize = index;
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery
                        .prize == lottery.index + 1)) {
                    lottery.speed += 110;
                } else {
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
            };
            lottery.timer = setTimeout(roll, lottery.speed);
        }
        return false;
    }

    var click = false;
    window.onload = function () {
        lottery.init('lottery');
        $("#lottery a").click(function () {
            if (click) {
                return false;
            } else {
                lottery.speed = 100;
                roll();
                click = true;
                return false;
            }
        });
    };
        function checkPayStatus(orderId) {
        window.check = setInterval(function () {
            $.ajax({
                type: "post",
                url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/dcdev/system/get_order_status.php",
                data: {
                    params: JSON.stringify({
                        "pid": "0000000000000000",
                        "order_id": orderId,
                        "uid": "7cfd733cfa9a5ec7"
                    })
                },
                success: function (res) {
                    var obj = JSON.parse(res);
                    if (obj.res === 1) {
                        if (obj.data.status == 1) {
                            $('#state').html("<span style='color:red;'>支付成功！</span>");
                        } else {
                            console.log('订单未支付');
                        }
                    } else {
                        alert(obj.desc);
                    }
                }
            });
        }, 2000);
    }
        function wechatPayNative(fee) {

        $.ajax({
            type: "post",
            url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/tencent/mp/mp_pay_native_config.php",
            data: {
                params: JSON.stringify({
                    "pid": '0000000000000000',
                    "uid": "7cfd733cfa9a5ec7",
                    "body": "打赏",
                    "content":"aaa",
                    "total_fee": fee
                })
            },
            success: function (res) {
                var obj = JSON.parse(res);
                if (obj.res === 1) {
                    var data = obj.data;
                    jQuery('#qrcode').qrcode(data.code_url);

                    checkPayStatus(data.order_id);

                } else {
                    alert(obj.desc);
                }
            }
        });

    }
</script>






